<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>练习 - 网页时钟</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .clock {
        width: 600px;
        height: 600px;
        background: url(./images/clock.jpg) no-repeat;
        margin: 50px auto 0;
        position: relative;
      }

      .hh,
      .mm,
      .ss {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: url(./images/hour.png) no-repeat center;
      }

      .mm {
        background-image: url(./images/minute.png);
        transform: rotate(270deg);
      }

      .ss {
        background-image: url(./images/second.png);
        transform: rotate(30deg);
      }
    </style>
  </head>

  <body>
    <div class="clock">
      <div class="hh" id="h"></div>
      <div class="mm" id="m"></div>
      <div class="ss" id="s"></div>
    </div>
    <script>
      /*
      知识点：
        1. 创建日期对象 获取当前时间
        2. 多次定时器，重复获取时间，让指针动起来
    */

      // 查找页面的元素，定时器调用的函数外面，查找一次即可
      const hour = document.querySelector('.hh')
      const minute = document.querySelector('.mm')
      const second = document.querySelector('.ss')
      // 封装时钟效果，定时器定时调用的函数
      function clock() {
        const date = new Date()
        const hh = date.getHours()
        const mm = date.getMinutes()
        const ss = date.getSeconds()
        // 角度换算： 公式复制即可
        //   小时角度公式：小时 * 30 + 分钟 / 60 * 30
        //   分钟角度公式：分钟* 6 + 秒 / 60 * 6
        //   秒角度公式： 当前秒数 * 6
        hour.style.transform = `rotate(${hh * 30 + (mm / 60) * 30}deg)`
        minute.style.transform = `rotate(${mm * 6 + (ss / 60) * 6}deg)`
        second.style.transform = `rotate(${ss * 6}deg)`
      }
      // 主动调用一次，页面加载之后就要调用一次
      clock()
      // 通过定时器每隔一秒钟再调用一次。
      setInterval(clock, 1000)
    </script>
  </body>
</html>
